<template>
  <a-button @click="visible = true">
    <edit-outlined />
  </a-button>
  <a-upload
      v-model:file-list="fileList"
      name="file"
      :action="uploadUrl"
      :headers="headers"
      :data="params"
      @change="handleChange"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      点击上传
    </a-button>
  </a-upload>
  <a-drawer
      v-model:visible="visible"
      style="color: red"
      title="请输入文件名称"
      placement="right"
  >
    <AInput v-model:value="params.fileKey" placeholder="自定义名称" />
  </a-drawer>
</template>
<script setup>
import Config from "@/config/Config";
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const emits = defineEmits(['update:fileKey'])

const props = defineProps({
  fileKey: {
    type: String,
    default: ''
  }
})

const visible = ref(false)

const uploadUrl = Config.baseURL + '/public/storage/store'

const handleChange = info => {
  if (info.file.status !== 'uploading') {
    emits('update:fileKey', info.file.response.data.fileKey)
  }
  if (info.file.status === 'done') {
    message.success(`${info.file.name} 文件上传成功`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};

const fileList = ref([]);

const headers = {
  authorization: 'authorization-text'
}
const params = ref({
  channelBusinessId: '402809817fbc4f3d017fbcbed26a001d',
  bucketName: 'app-bucket',
  fileKey: undefined
})
</script>